@import "../../css/variables";

.features-item {
  text-align: justify;

  &:first-child {
    grid-column: 1 / 3;

    @media (max-width: $lg) {
      grid-column: 1 / 3;
    }

    @media (max-width: $sm) {
      grid-column: 1;
    }
  }

  &:nth-child(2) {
    grid-column: 3 / 5;

    @media (max-width: $lg) {
      grid-column: 3 / 5;
    }

    @media (max-width: $sm) {
      grid-column: 1;
    }
  }

  &:nth-child(3) {
    grid-column: 5 / 7;

    @media (max-width: $lg) {
      grid-column: 1 / 3;
    }

    @media (max-width: $sm) {
      grid-column: 1;
    }
  }

  &:nth-child(4) {
    grid-column: 1 / 4;

    @media (max-width: $lg) {
      grid-column: 3 / 5;
    }

    @media (max-width: $sm) {
      grid-column: 1;
    }
  }

  &:nth-child(5) {
    grid-column: 4 / 7;

    @media (max-width: $lg) {
      grid-column: 1 / 5;
    }

    @media (max-width: $sm) {
      grid-column: 1;
    }
  }

  h5 {
    margin-top: $spacer * 0.8;
    margin-bottom: $spacer * 1.2;
    text-align: center;
  }

  .features-item-icon {
    text-align: center;
    display: block;

    svg {
      stroke: $gray-700;
    }
  }
}
